<template>
  <div>
    <div class="recommendTitle">热销推荐</div>
    <ul>
      <router-link  class="item" v-for='item in list' :key=item.id tag="li" :to="'/detail/'+item.id">
        <img
          :src="item.imgUrl"
          alt
        >
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <span class="item-price">￥99</span>起
        </div>
      </router-link>
     
    </ul>
  </div>
</template>

<script>
export default {
  name: "homeRecommend",
  props:{
    list:Array
  }
};
</script>

<style lang="less" scoped>
@import "~@/assets/styles/common.less";
.recommendTitle {
  margin-top: 0.2rem;
  line-height: 0.8rem;
  background-color: #eee;
  text-indent: 0.2rem;
}
.item {
    height: 1.9rem;
    overflow: hidden;
    display: flex;
    
    img {
        width: 1.7rem;
        height: 1.7rem;
        padding: .1rem;
    }
    .item-info{
        flex: 1;
        padding: .1rem;
        // 添加此属性才可以使单行溢出显示省略号
        min-width: 0;
        .item-title {
            font-size: .4rem;
            margin: .2rem 0;
            .oneLine();
            
        }
        .item-desc{
            margin: .2rem 0;
            .oneLine();
            
        }
        .item-price{
            color: red;
            font-size: .4rem;
        }
    }
}
</style>
